<template>
  <div>
    <el-table
    :data="tableData.filter(data => !search || data.nickName.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%"
    stripe
    >
      <el-table-column
        label="Date"
        prop="createTime"
        :formatter="formatData"
        sortable>
      </el-table-column>
      <el-table-column
        label="Name"
        prop="nickName">
      </el-table-column>
      <el-table-column
        label="Phone"
        prop="phone">
      </el-table-column>
      <el-table-column
        label="Sex"
        prop="sex">
      </el-table-column>
      <el-table-column
        label="Identity">
        <template slot-scope="scope">
          <span v-if="scope.row.identity == 1">普通用户</span>
          <span v-else>商家</span>
        </template>
      </el-table-column>
      <el-table-column
        label="State">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1">正常</span>
          <span v-else>封禁</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            clearable
            style="width:80%"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
            <el-popconfirm
            title="确定解除该用户的封禁状态吗？"
            @confirm="handleUnBan(scope.row)"
            >
              <el-button
              slot="reference"
              size="mini"
              type="success"
              style="margin-right:10px;"
              v-show="scope.row.state == 1?false:true">解封</el-button>
            </el-popconfirm>
            <el-popconfirm
            title="确定将该用户进行封禁吗？"
            @confirm="handleBan(scope.row)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                style="margin-right:20px;"
                v-show="scope.row.state == 1?true:false">封禁</el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <div class="pagination" style="float:left">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request"

export default {
  name: 'ManagerUser',
  components: {
  },
  data() {
  return {
    total:1,
    currentPage:1,
    pageSize:10,
    tableData: [],
    search: '',
    // manger:null,
    }
  },
  created(){
    // if(this.manger!=null){
      this.loadInfo();
    // }
  },
  methods: {
    loadInfo(){
      request.get("/user/getUsers",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log('res :>> ', res);
        this.tableData = res.data.user.list
        this.total = res.data.user.total

      })
    },

    handleUnBan(row) {
      request.put("/user/updateUserInfo",row).then(res => {
      }).then(res => {
        row.state=1
      })
      // console.log(row);
    },
    handleBan(row) {
      request.put("/user/updateUserInfo",row).then(res => {
      }).then(res => {
        row.state=2
      })
      console.log(row);
    },
    handleSizeChange(pageSize){
        this.pageSize = pageSize
        this.loadInfo()
    },
    handleCurrentChange(pageNum){
        this.currentPage = pageNum
        this.loadInfo()
    },
    formatData(row, column, cellValue, index){
      cellValue = cellValue ? cellValue : null;
      let date = new Date(cellValue);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      return Y + M + D;
	    },
  },

}
</script>
